﻿<Space Direction="@DirectionVHType.Vertical">
	<SpaceItem>
		<InputPassword @bind-Value="@txtValue1" Placeholder="large Password" Size="@InputSize.Large" OnPressEnter="(e)=>Submit(e, txtValue1)" />
	</SpaceItem>
	<SpaceItem>
		<InputPassword 
			@ref=@_inputPassword
			@bind-Value="@txtValue2" 
			Placeholder="large Password" 
			Size="@InputSize.Large" 
			OnPressEnter="(e)=>Submit(e, txtValue2)" 
			IconRender="@actionSetting(() => OnClick(), attributes)" 
			ShowPassword="@visible"/>
	</SpaceItem>
</Space>

<style>
    .custom-password-icon {
        color: rgba(0,0,0,.45);
        cursor: pointer;
        transition: all .3s;
    }
</style>
@code{
    RenderFragment actionSetting(Func<Task> clickActionAsync, Dictionary<string, object> iconAttributes) =>
        @<Icon @attributes="@iconAttributes" OnClick="@clickActionAsync" />;

    private string txtValue1 { get; set; }
    private string txtValue2 { get; set; }
    private bool visible = false;
    private InputPassword _inputPassword;
    
    Dictionary<string, object> hideAttributes  = new() {
        ["Type"] = "eye-invisible",        
        ["Style"] = ""
    };

    Dictionary<string, object> showAttributes  = new() {        
        ["Type"] = "eye",        
        ["Style"] = "color: #1890ff"
    };

    Dictionary<string, object> attributes = new() {
        ["Class"] = "custom-password-icon",
        ["Type"] = "eye-invisible",
        ["Theme"] = "outline"
    };

    private void Submit(KeyboardEventArgs args, string password)
    {
        Console.WriteLine($"password: {password}");
    }

    private async Task OnClick() 
    {
        Console.WriteLine("Custom icon clicked");
        visible = !visible;
        if (visible)
            attributes = showAttributes;
        else
            attributes = hideAttributes;
        await _inputPassword.Focus();
    }
}